<script lang="ts" setup>
// import Layout from "./layout/index.vue"
// import { AppPage, AppInput } from "@va/primevue"
import {ref, watch} from "vue";
const home = ref({
  icon: 'pi pi-home'
});
const breadcrumbItems = ref([
  { label: 'Electronics' },
  { label: 'Computer' },
]);
const value = ref(null)
const size = ref("")
const placeholder = ref<string|undefined>("请填写用户名")
const onToggle = ()=>{
  size.value =  size.value?"":"large"
  placeholder.value = placeholder.value==='请填写用户名'?"顶顶顶顶":"请填写用户名"
}
const showDialog = ref(false)
const showDrawer = ref(false)
const onOpen = ()=>{

}
const onSubmit = ()=>{

}
const form = ref({
  userName:"",
  birthday:"",
  email:"",
})
const rules = {
  userName: [
    {
      required: true, message:"请填写用户名", trigger: 'blur'
    }
  ]
}
const code = ref(`
<div><p></p><pre><code>&lt;?php
$a = 1;</code></pre><p></p></div>
`)
const code1 = ref(`
<\?php
$a = 1;


$c = "hhfeifdl黑了发货后覅网费几哈覅额的确低价位都觉得ID额";
$b = 1;
?\>
<div>测试的内容<\/div>
`)
const themes = [
  "prism-a11y-dark","prism-atom-dark","prism-cb","prism-coy-without-shadows","prism-dracula",
  "prism-ghcolors","prism-gruvbox-dark","prism-hopscotch","prism-lucario","prism-material-dark",
  "prism-material-light","prism-material-oceanic","prism-one-dark","prism-one-light","prism-shades-of-purple",
  "prism-vs","prism-vsc-dark-plus","prism-xonokai","prism-z-touch"
];
const selectedTheme = ref("")
watch(()=>selectedTheme.value, ()=>{
  console.log(selectedTheme.value)
})
const labelAlign = ref('right')
// const rules = {
//   trigger: ['input', 'blur'],
//   validator() {
//     if (valueRef.value !== message) {
//       return new Error(message)
//     }
//   }
// }
</script>

<template>
  <app-layout>
    <app-page class="mx-4 my-4" title="测试标题" subtitle="测试副标题" >
      <template #header>
        <Breadcrumb :home="home" :model="breadcrumbItems" />
      </template>
      <template #title-extra>
        测试
      </template>
<!--      <form-item field="birthday" label="生日" label-position="left" >-->
<!--        <AppInput name="birthday" v-model="form.birthday"  prefix="pi-search" suffix="pi-search" clearable :size="size" :placeholder="placeholder" />-->
<!--      </form-item>-->
<!--      <Switch></Switch>-->
      <SelectButton v-model="labelAlign" :options="['left','right','justify','top']" aria-labelledby="basic" />
<!--        <FormItem name="birthday" label="用户名111" >-->
<!--          <AppInput name="birthday" v-model="form.birthday"  clearable  placeholder="请输入姓名111" />-->
<!--        </FormItem>-->
      <n-form @submit.prevent="onSubmit" v-model="form" :rules="rules"  label-width="auto" label-align="right" :label-placement="labelAlign">
        <n-form-item name="email" label="邮箱">
          <AppInput v-model="form.email"   clearable   placeholder="请输入邮箱" />
        </n-form-item>
        <n-form-item name="userName" label="用户名">
          <AppInput v-model="form.userName"  clearable  placeholder="请输入姓名" />
        </n-form-item>
        <br>
        <p-button label="切换" @click="onToggle"/>
        <AppDialog v-model="showDialog" header="弹窗" >
          <div class="h-200px">
            <form-item label="用户名" label-position="left">
              <AppInput prefix="pi-search"  clearable :size="size" :placeholder="placeholder" />
            </form-item>
            <form-item label="用户名" label-position="left">
              <AppInput prefix="pi-search"   clearable :size="size" :placeholder="placeholder"  />
            </form-item>
            <form-item label="用户名" label-position="left">
              <AppInput prefix="pi-search"   clearable :size="size" :placeholder="placeholder"  />
            </form-item>
            <p-button label="打开抽屉" @click="showDrawer = true"/>
          </div>
        </AppDialog>
        <AppDrawer v-model="showDrawer" header="抽屉" >
          <div class="h-200px">
            抽屉抽屉抽屉抽屉抽屉抽屉抽屉抽屉的点点滴滴
          </div>
        </AppDrawer>
        <p-button label="打开弹窗" @click="showDialog = true"/>
        <p-button label="提交表单" type="submit"/>
        <p-button label="重置" type="reset"/>
      </n-form>
    </app-page>
    <!--      <Toolbar>-->

    <!--      </Toolbar>-->

    <div class="h-1200px">
      <h3>Welcome back, Admin!</h3>
      <!-- 更多内容 -->
      <ul class="p-menubar-root-list">
        <li class="p-menubar-item">
          <div class="p-menubar-item-content">
            <a class="p-menubar-item-link">
              <span class="p-menubar-item-icon pi pi-home"></span>
              <span class="p-menubar-item-label">测试一</span>
              <span class="p-ink p-ink-active"></span>
            </a>
          </div>
        </li>
      </ul>

      <div class="m-3">
        <CodeEditor v-model="code1" language="php" />
      </div>
      <div class="bg-white m-3 p-3">
        <AppCode :code="code1"></AppCode>
<!--        <AppPrismCode  v-model="code1"  width="800"  > </AppPrismCode>-->
      </div>

    </div>
  </app-layout>
</template>